<template>
  <div class="classify-display">
    <div class="tag-overflow-box">
      <div class="tag-box flex">
        <router-link tag="div" class="tag" v-for="functionality of functionalities" :key="functionality.id"
         :to="{name: 'FunctionalityDisplay', params: {functionalityId: functionality.id}}">
         {{functionality.name}}
        </router-link>
      </div>
    </div>
    <div class="article-box-container flex">
      <MiNiArticle  v-for="(article, index) of articles" :key="index" :articleInfo="article"/>
    </div>
  </div>
</template>

<script>
import MiNiArticle from '__COMPONENTS__/mini_article/MiNiArticle.vue'
import { GET_FUNCTIONALITIES} from '__STORE__/operation-type'
import { getArticleByFunctionlityId } from '__SERVICE__/article.js'
import paramsDispose from '__CORE__/mixins/paramsDispose.js'
import Vue from 'vue'
import DragController from '__UTILS__/move.js'

export default {
  name: 'FunctionalityDisplay',
  components: {MiNiArticle},
  props: ['id', 'functionalityId'],
  mixins: [paramsDispose],
  data: ()=>({
    functionalities: [],
    articles: []
  }),
  computed: {
    isPC() {
      return this.$store.state.globalConfig.equipmentType === 'PC'
    },
  },
  methods: {
    //获取功能性标题
    async getFunctionalities() {
      try {
        this.$Loading.show()
        const dataRsource = this.$store.state.globalConfig
        //如果没有等待 获取数据
        if(!dataRsource.functionalities ) await this.$store.dispatch(GET_FUNCTIONALITIES)
        this.$Loading.hidden()
        //成功获取数据
        const functionalities = dataRsource.functionalities 
        this.functionalities = Object.freeze(functionalities)
      }catch(e) {
        console.log(e.message)
      }
    },
    //获取文章 start
    async getArticleByFunctionlityId(id) {
      try {
        this.$Loading.show()
        const result = await getArticleByFunctionlityId(id)
        this.$Loading.hidden()
        const {data: {articles}} = result
        const functionality_model = this.functionalities.find((functionality)=>{
          return functionality.id == this.functionalityId
        })
        articles.forEach((article)=>{
          article.functionality_model = functionality_model
        })
        this.articles = Object.freeze(articles)
      }catch(e) {
        console.log(e.message)
        Vue.prototype.$Notice.error({
          title: '操作错误',
          desc: 'URL需要是合理值',
          duration: 3000
        })
        this.$router.push({name: 'Classify'})
      }
    },
    //获取文章 end

    //id有效要做的事 start
    idEffectiveToDo(newValue, oldValue) {
      this.getArticleByFunctionlityId(newValue)//更新之后
    },
    //id有效要做的事 end

    //id无效要做的事 start
    idNoneffectiveToDo(newValue, oldValue) {
      this.$router.push({name: 'FunctionalityDisplay', params: {functionalityId: oldValue}})
    }
    //id无效要做的事 end
  },
  created() {
    this.getFunctionalities()
    this.getArticleByFunctionlityId(this.functionalityId)
  },
  mounted() {
    if(this.isPC) {
      const dragEle = new DragController(
        document.getElementsByClassName('tag-box')[0],
        'H'
      )
      dragEle.binding()
    }
  },
}
</script>

<style lang="less">
  @import url('__CSS__/classify_display/classify_display.less');
</style>